<template>
  <a-card size="small" :title="title">
    <div>
      <a-row type="flex" style="margin-bottom:10px" :gutter="16">
        <a-col :span="2">排名</a-col>
        <a-col :span="6">教师姓名</a-col>
        <a-col :span="6">员工编号</a-col>
        <a-col :span="6">所属学院</a-col>
        <a-col :span="4">操作</a-col>
      </a-row>
      <a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in this.dataSource" :key="index">
        <a-col :span="2" style="display: none">
          <a-form-model-item>
            <a-input class="gfxy-item" placeholder="id" v-model="item.id" />
          </a-form-model-item>
        </a-col>
        <a-col :span="2">
          <a-form-model-item  :prop="'this.dataSource.' + index + '.ranked'" :rules="{required: true,message: '请输入排名',trigger: 'blur'}">
            <a-input-number class="gfxy-item" placeholder="排名" v-model="item.ranked"></a-input-number>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item  :prop="'this.dataSource.' + index + '.teacherId'" :rules="{required: true,message: '请选择教师',trigger: 'blur'}">
            <j-select-user-by-dep class="gfxy-item" v-model="item.teacherId" @change="selectedUser(index)" :multi="false"></j-select-user-by-dep>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item  :prop="'this.dataSource.' + index + '.teacherId'">
            <a-input class="gfxy-item" placeholder="教工编号" v-model="item.teacherId" :disabled="true"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item  :prop="'this.dataSource.' + index + '.orgId_dictText'">
            <a-input class="gfxy-item" placeholder="所属学院" v-model="item.orgId_dictText" :disabled="true"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="2">
          <a-form-model-item>
            <a-popconfirm title="确定删除改教师？" @confirm="delRow(index)" okText="确定" cancelText="取消">
              <a-icon class="gfxy-item" type="minus-circle"   style="fontSize :20px"/>
            </a-popconfirm>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-button type="dashed" style="width: 98%;margin-top: 10px" @click="addMember">
        <a-icon type="plus" /> 添加成员
      </a-button>
    </div>
  </a-card>
</template>

<script>
import { getAction } from '@api/manage'
export default {
  name: 'GMemberList',
  model:{
    prop: "value",
    event: "change"
  },
  props: {
    title: {
      type: String,
      default:"",
      required: false
    },
    value:{
      type: Array,
      required: true
    },
    disabled:{
      type: Boolean,
      required: false,
      default: false
    },
  },
  data() {
    console.log("data")
    console.log(this.value)
    return {
      dataSource: this.value,
      url: {
        getDepUrl:"/common/memberList/queryDepartmentByUserName",
      },
    }
  },
  watch: {
    dataSource:{
      handler: function(newValue){
        this.$emit('change', this.dataSource);
      }
    }
  },
  methods: {
    selectedUser(index){
      console.log(index)
      let teacherId = this.dataSource[index].teacherId;
      console.log("选择的用户为：" + teacherId);
      this.queryDep(index,teacherId);
    },
    delRow(index){
      console.log(index);
      this.dataSource.splice(index,1);
      for(let i=1 ; i<= this.dataSource.length ; i++){

        this.dataSource[i-1].ranked = i;
      }
      console.log(this.dataSource)
      this.$forceUpdate();
    },
    queryDep(index,teacherId){

      console.log(this.url.getDepUrl)
      getAction(this.url.getDepUrl ,{userName: teacherId}).then((res)=>{
        if(res.success){
          console.log(res.result);
          this.dataSource[index].orgId = res.result.orgCode;
          this.dataSource[index].orgId_dictText = res.result.departName;
          console.log(this.dataSource[index])
        }else{
          this.$message.warning(res.message);
        }
      }).finally(() => {
        console.log("finally")
      })
    },
    addMember (){
      this.dataSource.push(
        {ranked:this.dataSource.length+1, orgId_dictText:'', matchType:this.matchType
        })
    },
  }
}
</script>

<style scoped>
.gfxy-item{
  margin-top:5px;
}
.ant-row {
  margin-bottom: 0;
}
</style>